<template>
    <view class="youwan">
        <view class="container">
            <ant-input
                placeholder="请输入内容"
                v-model="searchQuery"
                className="search-bar"
                focusClassName="search-bar-focus"
                confirm-type="search"
                allowClear
                focus
                @confirm="onConfirm"
            >
                <ant-icon type="SearchOutline" slot="prefix" />
            </ant-input>
            <view class="cancel">
                <ant-button type="primary" inline size="small" @click="onSearch" className="round">搜索</ant-button>
            </view>
        </view>

        <view style="padding: 16px">
            历史记录
            <view>&nbsp;</view>
            <view>
                <ant-tag v-for="(item, index) in historyTags" :key="index" className="myTag" type="outline" @click="onTagClick(item)">{{ item }}</ant-tag>
            </view>
        </view>

        <view class="content" v-if="recommendedClothing">
            <view style="font-size: 24px; font-weight: bolder; margin-left: 16px">推荐服饰</view>

            <view class="leftcontainer">
                <view class="left" :style="{ backgroundImage: 'url(' + recommendedClothing.imageUrl + ')' }" />

                <view class="rightcontent">
                    <view class="title1">{{ recommendedClothing.title }}</view>
                    <view class="title2">{{ recommendedClothing.shop }}</view>
                    <view class="title2">
                        <ant-tag className="myTag" type="outline">{{ recommendedClothing.date }}</ant-tag>
                        <ant-tag className="myTag" type="outline">{{ recommendedClothing.duration }}</ant-tag>
                        <ant-tag className="myTag" type="outline">{{ recommendedClothing.ticket }}</ant-tag>
                    </view>
                    <view class="title3">
                        <ant-icon type="LocationFill" style="font-size: 22px" />
                        &nbsp; {{ recommendedClothing.location }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <view class="title3right"><ant-icon type="StarFill" /> {{ recommendedClothing.rating }}万</view>
                    </view>
                </view>
            </view>

            <view>&nbsp;</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchQuery: '', // 用于绑定搜索框输入
            historyTags: ['民俗', '傣族', '苗族'], // 历史记录
            recommendedClothing: null // 推荐服饰的数据
        };
    },
    methods: {
        // 触发搜索操作
        onSearch() {
            if (this.searchQuery.trim()) {
                this.getRecommendations(this.searchQuery);
                this.updateHistory(this.searchQuery);
            } else {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none'
                });
            }
        },
        // 当点击历史标签时，进行搜索
        onTagClick(tag) {
            this.searchQuery = tag;
            this.getRecommendations(tag);
        },
        // 处理确认搜索事件
        onConfirm() {
            this.onSearch();
        },
        // 获取推荐的服饰数据
        getRecommendations(query) {
            // 模拟获取推荐数据
            this.recommendedClothing = {
                title: `${query}服饰`,
                shop: `${query}服饰屋`,
                date: '四月中旬',
                duration: '3~7日',
                ticket: '无门票',
                location: '云南西双版纳',
                rating: '1.9',
                imageUrl: 'https://img0.baidu.com/it/u=1346917303,2081087991&fm=253&fmt=auto&app=120&f=JPEG?w=237&h=237'
            };
        },
        // 更新历史记录
        updateHistory(query) {
            if (!this.historyTags.includes(query)) {
                this.historyTags.push(query);
            }
        }
    }
};
</script>

<style>
.container {
    display: flex;
    align-items: center;
    padding: 16px 16px 0 16px;
}
.search-bar {
    padding: 4px 0 4px 0;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all 0.4s;
    flex: 1;
}
.search-bar-focus {
    border-color: #1677ff;
}
.cancel {
    color: #333333;
    margin-left: 8px;
}

.round {
    border-radius: 20px;
}

.leftcontainer {
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 16px 16px 0 16px;
    background-color: #fff;
}

.left {
    background-size: cover;
    border-radius: 10px 0 0 10px;
    width: 100px;
    height: 100px;
}
.rightcontent {
    margin-left: 16px;
    line-height: 1.8;
}
.title1 {
    font-size: 16px;
    font-weight: bold;
}
.title2 {
    color: gray;
}
.title3 {
    display: flex;
    font-size: 14px;
    font-weight: bold;
}
.title3right {
    font-size: 13px;
    color: gray;
}

.myTag {
    margin-right: 16rpx;
    font-size: 16px;
    height: 28px;
}

</style>
